<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <meta name="description" content="Probably the most complete UI kit out there. Multiple functionalities and controls added,  extended color palette and beautiful typography, designed as its own extended version of Bootstrap at  the highest level of quality.                             ">
    <meta name="author" content="Webpixels">
    <title>评测系统</title>
    <!-- Fonts -->
    <link href="https://fonts.googleapis.com/css?family=Nunito:400,600,700,800|Roboto:400,500,700" rel="stylesheet">
    <!-- Theme CSS -->
    <link type="text/css" th:href="@{/css/theme.css}" rel="stylesheet">
    <link type="text/css" th:href="@{/scss/evaluation.css}" rel="stylesheet">
</head>
<body>
<div th:replace="~{common/header :: header}"></div>
<main class="main">
    <section class="spotlight parallax bg-cover bg-size--cover" data-spotlight="fullscreen">
        <div class="spotlight-holder py-lg pt-lg-xl">
            <div class="container d-flex no-padding">
                <div class="col" style="overflow: scroll;">
                    <table border="1" bordercolor="#ccc" class="table table-hover align-items-center" style="min-width: 630px;text-align: center">
                        <thead class="thead-light">
                        <tr>
                            <th scope="col">序号</th>
                            <th scope="col">学号</th>
                            <th scope="col">学生姓名</th>
                            <th scope="col">性别</th>
                            <th scope="col">创建时间</th>
                            <th scope="col">操作</th>
                        </tr>
                        </thead>
                        <tbody>
                        <div>
                            <tr th:each="stu, status : ${studentList}">
                                <td th:text="${status.index + 1}"></td>
                                <td th:text="${stu.esStudentSno}"></td>
                                <td th:text="${stu.esStudentName}"></td>
                                <td th:text="${stu.esStudentGender == 1 ? '男' : '女'}"></td>
                                <td th:text="${#dates.format(stu.createTime, 'yyyy-MM-dd')}"></td>
                                <td>
                                    <button th:data-id="${stu.esStudentId}" th:data-sno="${stu.esStudentSno}" th:data-name="${stu.esStudentName}" data-toggle="modal" data-target="#updateStudentModal" th:data-gender="${stu.esStudentGender}" style="margin: 10px" type="button" class="btn btn-sm btn-primary" onclick="selectCurStudent(this)">修改</button>
                                    <button th:data-id="${stu.esStudentId}" style="margin: 10px" type="button" class="btn btn-sm btn-danger" data-toggle="modal" data-target="#deleteStudentModal" onclick="removeCurStudent(this)">删除</button>
                                </td>
                            </tr>
                        </div>
                        </tbody>
                    </table>
                </div>
            </div>
            <div class="modal fade modal-dialog-scrollable" id="updateStudentModal" tabindex="-1" aria-labelledby="updateStudentModalLabel" aria-hidden="true">
                <div class="modal-dialog">
                    <div class="modal-content">
                        <div class="modal-header">
                            <h5 class="modal-title" id="addStudentModalLabel">修改学生</h5>
                            <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                                <span aria-hidden="true">&times;</span>
                            </button>
                        </div>
                        <div class="modal-body">
                            <form id="updateStudentForm" method="post" th:action="${#servletContext.contextPath + '/manageStudent/updateStudent'}">
                                <input type="text" th:value="${#request.getParameter('classId')}" id="updateStudentFormClassId" name="classId" hidden="hidden">
                                <input type="text" id="updateStudentFormStudentId" name="studentId" hidden="hidden">
                                <div class="form-group">
                                    <label for="student-sno" class="col-form-label">学号</label>
                                    <input type="text" name="sno" class="form-control" id="student-sno">
                                </div>
                                <div class="form-group">
                                    <label for="student-name" class="col-form-label">姓名</label>
                                    <input type="text" name="name" class="form-control" id="student-name">
                                </div>
                                <div class="form-check">
                                    <input class="form-check-input" type="radio" name="gender" id="student-gender-1" value="1" checked>
                                    <label class="form-check-label" for="student-gender-1">男</label>
                                </div>
                                <div class="form-check">
                                    <input class="form-check-input" type="radio" name="gender" id="student-gender-2" value="2">
                                    <label class="form-check-label" for="student-gender-2">女</label>
                                </div>
                            </form>
                        </div>
                        <div class="modal-footer">
                            <button type="button" class="btn btn-secondary" data-dismiss="modal" onclick="unSelectCurStudent()">关闭</button>
                            <button type="button" class="btn btn-primary" onclick="submitUpdateStudentForm()">添加</button>
                        </div>
                    </div>
                </div>
            </div>
            <div class="modal fade modal-dialog-scrollable" id="deleteStudentModal" tabindex="-1" aria-labelledby="deleteStudentModalLabel" aria-hidden="true">
                <div class="modal-dialog">
                    <div class="modal-content">
                        <div class="modal-header">
                            <h5 class="modal-title">确认删除</h5>
                            <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                                <span aria-hidden="true">&times;</span>
                            </button>
                        </div>
                        <div class="modal-body">
                            <form id="deleteStudentForm" method="post" th:action="${#servletContext.contextPath + '/manageStudent/deleteStudent'}">
                                <input type="text" th:value="${#request.getParameter('classId')}" name="classId" hidden="hidden">
                                <input type="text" id="removeStudentFormStudentId" name="studentId" hidden="hidden">
                            </form>
                        </div>
                        <div class="modal-footer">
                            <button type="button" class="btn btn-secondary" data-dismiss="modal">取消</button>
                            <button type="button" class="btn btn-primary" onclick="submitDeleteStudentForm()">确定</button>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>
</main>
<div th:replace="~{common/footer :: footer}"></div>
</body>
<script>
    function selectCurStudent(e) {
        $("#updateStudentFormStudentId").val(e.getAttribute("data-id"));
        $("#student-sno").val(e.getAttribute("data-sno"));
        $("#student-name").val(e.getAttribute("data-name"));
        var gender = e.getAttribute("data-gender");
        if (gender === '1') {
            $("#student-gender-1").attr("checked", true);
        } else if (gender === '2') {
            $("#student-gender-2").attr("checked", true);
        }
    }

    function removeCurStudent(e) {
        $("#removeStudentFormStudentId").val(e.getAttribute("data-id"));
    }

    function unSelectCurStudent() {
        $("#updateStudentFormClassId").val(0);
        $("#student-sno").val("");
        $("#student-name").val("");
        $("#student-gender-1").attr("checked", true);
        $("#student-gender-2").attr("checked", false);
    }

    function submitUpdateStudentForm() {
        $("#updateStudentForm").submit();
    }

    function submitDeleteStudentForm() {
        $("#deleteStudentForm").submit();
    }
</script>
</html>
